<template>
  <view>
    <view class="main-container">
      <view class="card-view">
        <view class="info-row">
          <view class="left">
            <view class="name">头像</view>
          </view>
          <view class="value">
            <button
              class="type-button"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <image
                @click="uploadHeadPortrait"
                :src="form.headPortrait"
                class="avatar"
              ></image>
            </button>
          </view>
          <uni-icons type="right" color="#BABDC4" />
        </view>
        <view class="info-row">
          <view class="left">
            <view class="name">用户名</view>
          </view>
          <view class="value">
            <input type="nickname" name="nickname" :value="form.nickname" />
          </view>
          <uni-icons type="right" color="#BABDC4" />
        </view>
        <view class="info-row">
          <view class="left">
            <view class="name">性别</view>
          </view>
          <view class="value">
            <picker :range="['未知', '男', '女']" @change="pickerChange">
              <input
                disabled
                placeholder="未选择"
                v-model="form.sex"
                placeholder-class="placeholder-class"
              />
            </picker>
          </view>
          <uni-icons type="right" color="#BABDC4" />
        </view>
        <view class="info-row">
          <view class="left">
            <view class="name">手机号</view>
          </view>
          <view class="value">
            <button
              class="type-button"
              open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
            >
              <input v-model="form.contactPhone" maxlength="11" />
            </button>
          </view>
          <uni-icons type="right" color="#BABDC4" />
        </view>
      </view>
      <view class="save-btn" @click="save">保存</view>
    </view>
  </view>
</template>

<script>
import * as userInfo from "../../common/api/userInfo.js";
import * as upload from "../../common/upload.js";
import * as loginUtils from "../../utils/loginUtils.js";
export default {
  data() {
    return {
      form: {
        headPortrait: "",
        nickname: "",
        sex: "",
        contactPhone: "",
      },
    };
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const openid = uni.getStorageSync("openid_key");
      const param = {
        // openId:'oWcQZ44bUfE02sbyEAvKx1CTjRLU'
        openId: openid,
      };
      userInfo
        .queryByOpenId(param)
        .then((result) => {
          this.form = Object.assign({}, result.data.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    uploadHeadPortrait() {
      upload
        .uploadImage()
        .then((result) => {
          console.log("res", result);
          this.form.headPortrait = result.data.url;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    save() {
      const param = Object.assign({}, this.form, {
        createTime: undefined,
        updateTime: undefined,
      });
      console.log("param", param);

      userInfo
        .update(param)
        .then((result) => {
          uni.showToast({
            title: result.data.msg,
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    pickerChange(e) {
      this.form.sex = ["未知", "男", "女"][e.detail.value];
    },
    getPhoneNumber(e) {
      console.log("================>");
      console.log(e.detail.code); // 动态令牌
      console.log(e.detail.errMsg); // 回调信息（成功失败都会返回）
      console.log(e.detail.errno); // 错误码（失败时返回）
      console.log("<================");
      const _self = this;
      loginUtils.getPhoneNumber(e.detail.code, (e) => {
        console.log("loginUtils.getPhoneNumber", e);
        if (e) {
          _self.form.contactPhone = e.phone_info.purePhoneNumber;
        }
      });
    },
    onChooseAvatar(e) {
      console.log(e.detail);
      const avatarUrl = e.detail.avatarUrl;
      upload
        .uploadFile(avatarUrl)
        .then((result) => {
          console.log("res", result);
          this.form.headPortrait = result.data.url;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}
.main-container {
  display: flex;
  flex-direction: column;
}
.card-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
  padding: 30rpx;
  background: white;
  border-radius: 16rpx;
  .info-row {
    width: 100%;
    display: flex;
    min-height: 80rpx;
    align-items: center;
    .left {
      flex: 1;
      display: flex;
      .name {
        color: rgba(35, 35, 35, 0.7);
        font-size: 30rpx;
        min-width: 200rpx;
      }
    }
    .avatar {
      width: 76rpx;
      height: 76rpx;
      border-radius: 50%;
    }
    input {
      text-align: right;
      color: #232323;
      font-size: 30rpx;
    }
    .placeholder-class {
      color: rgba(35, 35, 35, 0.5);
      font-size: 30rpx;
    }
    .value {
      color: #232323;
      font-size: 30rpx;
      margin-right: 16rpx;
      display: flex;
      align-items: center;
    }
  }
}
.save-btn {
  margin: 30rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 48rpx;
  font-size: 30rpx;
  background: #0bc5ae;
}

.type-button {
  background: transparent;
  border: none;
  outline: none;
}
button {
  padding: 0;
  margin: 0;
}
button::after {
  border: none;
}
</style>
